<template>
	<div>
		<el-dialog title="门店列表" :visible.sync="chooseStoreVisible" width="70%" :append-to-body="true" center>

				<el-row>
					<el-col :span="10" v-for="(item, index) in dataList" :key="index" :offset="index % 2 == 0 ? 1 : 2" style="margin-bottom: 20px;">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<el-row :gutter="20">
								<el-col :span="24">
									<div style="padding: 14px;">
										<span>{{ item.name }}</span>
										<div class="bottom clearfix">
											<p class="time">{{ item.address }}</p>
											<!-- 1待审核,2通过，3拒绝-->
											<el-button type="text" class="button" v-if="item.status == 2" @click="adminSeller(item)">进入管理</el-button>
											<el-button type="text" class="button" v-if="item.status == 1" disabled>待审核</el-button>
											<el-popover v-if="item.status == 3" placement="top" trigger="hover" width="160">
												<p style="line-height: 20px;margin-bottom: 10px;">{{ item.stateMsg ? item.stateMsg : '暂无原因' }}</p>
												<div style="text-align: right;"><el-button type="primary" size="mini" @click="againSubmit(item)">重新提交</el-button></div>
												<el-button slot="reference" type="text" class="button" v-if="item.status == 3">
													审核失败
													<i class="el-icon-question"></i>
												</el-button>
											</el-popover>
										</div>
									</div>
								</el-col>
							</el-row>
						</el-card>
					</el-col>
				</el-row>

		</el-dialog>
	</div>
</template>

<script>
export default {
  data() {
		return {
			role: '',
			dataList: [],
			addOrUpdateVisible: false,
			chooseStoreVisible: false,
			storeForm: {
				name: ''
			}
		};
	},

	components: {},

	created() {
		this.getDataList();
	},

	methods: {
		/**
		 * 进入总部（管理员权限）
		 */
		adminTotal() {
			this.$router.replace({ name: 'home' });
		},

		/**
		 * @param {Object} item商家进入管理
		 */
		adminSeller(item) {
			this.$cookie.set('sellerInfo', JSON.stringify(item));
      this.$cookie.set('seller', item.sellerId);
			//保存当班信息
			this.$http({
				url: this.$http.adornUrl('/keepChangeWorkInfo'),
				method: 'get',
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.role = data.role;
					this.dataList = data.list;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
			this.$message({
				type: 'success',
				message: '切换门店成功'
			});
			this.$router.replace({ name: 'home' });
			this.chooseStoreVisible = false
		},

		getDataList() {
			this.chooseStoreVisible = true
			this.$http({
				url: this.$http.adornUrl('/store/tstoreseller/listByUserId'),
				method: 'get',
				params: this.$http.adornParams({
					page: 1,
					limit: 100
				})
			}).then(({ data }) => {
				console.log(JSON.stringify(data));
				if (data && data.code === 0) {
					this.role = data.role;
					this.dataList = data.list;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
		},
		/**
		 *
		 */
		// 新增 / 修改
		addStore() {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(0);
				this.getDataList();
			});
		},
		/**
		 * 注销
		 */
		logout() {
			this.$confirm('你确定进行注销操作吗', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$router.replace({ name: 'login' });
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		}
	},

	mounted() {
		//防止页面后退
		history.pushState(null, null, document.URL);
		window.addEventListener('popstate', function() {
			history.pushState(null, null, document.URL);
		});
	}
};
</script>

<style scoped>
.header-box {
	height: 80px;
}

.header {
	width: 100%;
	height: 80px;
	box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 99;
	background: #fff;
}

.header .content {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

.header .content .logo {
	height: 80px;
	line-height: 80px;
	margin-right: 50px;
	cursor: pointer;
}

.header .content .logo img {
	vertical-align: middle;
}

.header .nav li {
	float: left;
	height: 80px;
	line-height: 80px;
	margin-right: 30px;
	font-size: 16px;
	color: #4a4a4a;
	cursor: pointer;
}

.header .nav li span {
	padding-bottom: 16px;
	padding-left: 5px;
	padding-right: 5px;
}

.header .nav li span a {
	display: inline-block;
}

.header .nav li .this {
	color: #4a4a4a;
	border-bottom: 4px solid #ffc210;
}

.header .nav li:hover span {
	color: #000;
}

.header .login-bar {
	height: 80px;
}

.header .login-bar .shop-cart {
	margin-right: 20px;
	border-radius: 17px;
	background: #f7f7f7;
	cursor: pointer;
	font-size: 14px;
	height: 28px;
	width: 88px;
	margin-top: 30px;
	line-height: 32px;
	text-align: center;
}

.header .login-bar .shop-cart:hover {
	background: #f0f0f0;
}

.header .login-bar .shop-cart img {
	width: 15px;
	margin-right: 4px;
	margin-left: 6px;
}

.header .login-bar .shop-cart span {
	margin-right: 6px;
}

.header .login-bar .login-box {
	margin-top: 33px;
}

.header .login-bar .login-box span {
	color: #4a4a4a;
	cursor: pointer;
}

.header .login-bar .login-box span:hover {
	color: #000000;
}

.full-left {
	float: left !important;
}

.full-right {
	float: right !important;
}

.el-carousel__arrow {
	width: 120px;
	height: 120px;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
	background: #ffc210;
	border-color: #ffc210;
	border: none;
}

.el-checkbox__inner:hover {
	border-color: #9b9b9b;
}

.el-checkbox__inner {
	width: 16px;
	height: 16px;
	border: 1px solid #9b9b9b;
	border-radius: 0;
}

.el-checkbox__inner::after {
	height: 9px;
	width: 5px;
}
.container {
	width: 1200px;
	margin: 0 auto;
}

#granted-hotels {
	margin-bottom: 1em;
}

#granted-hotels li {
	float: left;
	margin-left: 1em;
	margin-top: 20px;
}

#granted-hotels li a {
	background-color: #599bb3;
	border-radius: 15px;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	padding: 32px 32px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #3d768a;
}

.choosetheformat .time {
	font-size: 13px;
	width: 70%;
	line-height: 25px;
	color: #999;
}

.choosetheformat .bottom {
	margin-top: 13px;
	line-height: 12px;
}

.choosetheformat .button {
	padding: 0;
	float: right;
}

.choosetheformat .image {
	width: 100%;
	display: block;
}

.choosetheformat .clearfix:before,
.choosetheformat .clearfix:after {
	display: table;
	content: '';
}

.choosetheformat .clearfix:after {
	clear: both;
}

.choosetheformat .el-tabs__header.is-top {
	margin-bottom: 0;
}

.choosetheformat .el-card.box-card {
	border-top: none;
}

.choosetheformat .demo-form-inline .el-form-item {
	margin-bottom: 0px;
}
</style>
